<template>
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box" @click="navToSearch">
			<input class="ser-input" type="text" value="" disabled placeholder="输入关键字搜索" placeholder-class="p_class" />
		</view>
		<!-- #endif -->

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<swiper class="carousel" :indicator-dots="true" circular @change="swiperChange" autoplay="autoplay">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage(item.productId,'banner',item.productName,item.isCoupon)">
					<image :src="item.picUrl" />
					<!-- mode="aspectFill" -->
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" v-for="(item,index) in iconList" :key="index" v-if="index<4" @click="navToClassification(item.id)">
				<image :src="item.icon"></image>
				<text>{{item.name}}</text>
			</view>
		</view>

		<!-- 秒杀楼层 -->
		<view class="seckill-section m-t" v-if="spikeList.length != 0 && spikeList != null">
			<view class="s-header" @click="goPanic">
				<!-- <image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image> -->
				<text class="s-img">限时秒杀</text>
				<!-- <text class="tip">8点场</text> -->
				<view class="right">
					<text class="hour timer">{{coutDownDie.a}}</text>:
					<text class="minute timer">{{coutDownDie.b}}</text>:
					<text class="second timer">{{coutDownDie.c}}</text>
					<span class="msAll">查看全部<text class="yticon icon-you"></text></span>
				</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in spikeList" :key="index" class="floor-item" @click="navToDetailPage(item.id,'panic',sId)">
						<image :src="item.pic" mode="aspectFill"></image>
						<text class="title clamp">{{item.name}}</text>
						<view class="country clamp">
							<img :src="item.nationalFlag" alt="">
							<text>{{item.originCountry}}</text>
						</view>
						<view class="price">￥{{item.flashPromotionPrice}} <span>￥{{item.originalPrice}}</span></view>
					</view>

				</view>
			</scroll-view>
		</view>
		<!--广告位-->
		<view class="ad-1" @click="toPage" v-if="adPlus">
			<img mode="aspectFill" :src="adPlus" alt="">
		</view>
		<!--品牌热卖-->
		<view class="seckill-section m-t">
			<view class="s-header">
				<!-- <image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image> -->
				<text class="s-img">主题精选</text>
				<!-- <text class="tip">8点场</text> -->
			</view>
			<view class="fix-list">
				<div class="el" v-for="(item,index) in hotList" v-if="index<4" :key="index" @click="navToDetailPage(item.id,'hot',item.name)">
					<div><img :src="item.topicPicture" alt="" mode="aspectFill"></div>
					<div class="info" :class="'c'+index">{{item.name}}</div>
				</div>
				<!--<div class="el">-->
				<!--<div><img src="/static/temp/temp_c.png" alt=""></div>-->
				<!--<div class="info c1">人气尖货</div>-->
				<!--</div>-->
				<!--<div class="el">-->
				<!--<div><img src="/static/temp/temp_c.png" alt=""></div>-->
				<!--<div class="info c2">当月热销</div>-->
				<!--</div>-->
				<!--<div class="el">-->
				<!--<div><img src="/static/temp/temp_c.png" alt=""></div>-->
				<!--<div class="info c3">女人必选</div>-->
				<!--</div>-->
			</view>
		</view>
		<!--拉美专题-->
		<view class="seckill-section m-t">
			<view class="s-header">
				<!-- <image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image> -->
				<text class="s-img">拉美专场</text>
				<!-- <text class="tip">8点场</text> -->
			</view>
			<view class="fix-list lm">
				<div class="el" v-for="(item,index) in special" v-if="index<4" :key="index" @click="navToDetailPage(item.id,'hot',item.name)">
					<div><img :src="item.topicPicture" alt="" mode="aspectFill"></div>
					<div class="info" :class="'c'+index">{{item.name}}</div>
				</div>
				<!--<div class="el">-->
				<!--<div><img src="/static/temp/temp_c.png" alt=""></div>-->
				<!--<div class="info c1">墨西哥</div>-->
				<!--</div>-->
				<!--<div class="el">-->
				<!--<div><img src="/static/temp/temp_c.png" alt=""></div>-->
				<!--<div class="info c2">巴西</div>-->
				<!--</div>-->
				<!--<div class="el">-->
				<!--<div><img src="/static/temp/temp_c.png" alt=""></div>-->
				<!--<div class="info c3">秘鲁</div>-->
				<!--</div>-->
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="store_hot">
			<view class="h_title">好物推荐</view>
			<view class="h_sub">新品推荐，物美价廉</view>
		</view>
		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item.id)">
				<view class="image-wrapper">
					<image :src="item.pic" mode="aspectFit"></image>
				</view>
				<text class="title clamp">{{item.name}}</text>
				<view class="country clamp">
					<img :src="item.nationalFlag" alt="">
					<text>{{item.originCountry}}</text>
				</view>
				<view class="price">￥{{item.price}} <span>￥{{item.originalPrice}}</span></view>
			</view>
		</view>
<!-- 		<view class="guide" v-if="showGuide">
			<image src="/static/index/guide2.png" class="guideImg1"></image>
			<image src="/static/index/guide1.png" class="guideImg2"></image>
			<image src="/static/index/guide3.png" class="guideImg3" @click="confirmGuide"></image>
		</view> -->
	</view>
</template>

<script>
	import {
		_banner,
		_hotStyle,
		_homeIcon,
		_spike,
		_recommend,
		_bannerAll
	} from '../../common/vmeitime-http/home.js'
	import {_judgeBingingPhone} from '../../common/vmeitime-http/user.js'
	import utils from '../../common/utils/util'
	let t = null;
	export default {
		data() {
			return {
				localNowDate: new Date().getTime(),
				endtime: 0,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				hotList: [],
				goodsList: [],
				iconList: [],
				spikeList: [],
				spikeTime: ['00', '00', '00'], //抢购时间组
				sId: "", //抢购的sessionId
				nowTime: [],
				special: [],
				coutDownDie: {
					a: '23',
					b: "59",
					c: "59"
				},
				adPlus: null,
				page: {
					num: 1,
					size: 8
				},
				loadingType: 'more', //加载更多状态
				// showGuide: true,
				// loginStatus:false,//登陆状态
			};
		},
		onShareAppMessage(res) {
			return {
				title: '拉美购——让拉美触手可及',
				path: '/pages/index/index'
			}
		},
		onLoad() {
			// this.loginStatus = uni.getStorageSync('authInfo')?true:false;
			// if(this.loginStatus){
			// 	this.judgeBingingPhone();
			// }
			this.loadData();
			this.skill();
			// let firstOpen = uni.getStorageSync("loadOpen")
			//     console.log("是否首次打开本页面==",firstOpen)
			//     if (firstOpen == undefined || firstOpen == '') { //根据缓存周期决定是否显示引导
			//       this.showGuide = true;
			// 	  uni.hideTabBar();
			//     } else {
			//      this.showGuide = false;
			//      uni.showTabBar();
			//     }
			
			
			/*秒杀2分钟刷一次*/
			// setInterval((item) => {
			// 	this.skill()
			// }, 1000 * 120)
		},
		onShow() {
			//            this.loadData();
			var obj = wx.getLaunchOptionsSync();
			console.log('启动小程序的场景值:', obj.scene)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh');
			setTimeout(function() {
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();
			}, 800)
		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			async judgeBingingPhone(){
			    let tempData = await _judgeBingingPhone()
				if(tempData.data.code==200){
			        console.log(tempData.data.data)
					if(tempData.data.data == 0){
						uni.redirectTo({
							url: "/pages/user/edit_tel?mark=loginBind"
						})
					}
				}
			},
			confirmGuide() {
				uni.setStorageSync('loadOpen','OpenTwo');
				this.showGuide = false;
				uni.showTabBar();
			},
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						uni.showToast({
							title: "亲，已经到底了~",
							icon: "none"
						})
						return false;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}

				/*-*/
				if (type === 'refresh') {
					this.goodsList = [];
					this.page.num = 1
				}
				let goods = await _bannerAll({
					pageNum: this.page.num,
					pageSize: this.page.size,
				});
				this.carouselList = goods.data.data.banner;
				this.hotList = goods.data.data.hotSale;
				this.special = goods.data.data.special;
				this.iconList = goods.data.data.smallPicture;
				this.adPlus = goods.data.data.activity ? goods.data.data.activity.picUrl : null
				let goodsList = goods.data.data.classProduct;
				// this.skill()
				let totalPage = goods.data.data.totalPage;
				let pNum = this.page.num++;
				this.page.num = totalPage > pNum ? pNum + 1 : totalPage;
				this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = totalPage > pNum ? 'more' : 'nomore';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading()
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			/*秒杀*/
			async skill() {
				let spikeList = await _spike();
				this.spikeList = spikeList.data.data.productList;
				this.sId = spikeList.data.data.flashPromotionSessionId;
				console.log(this.spikeList)
				let tempSpikeTime = utils.formatDate.format(new Date(spikeList.data.data.endTime), 'hh:mm:ss');
				this.endtime = spikeList.data.data.endTime;
				console.log(spikeList.data.nowTime, "222")
				this.localNowDate = this.localNowDate - spikeList.data.nowTime;
				/*倒计时计算*/
				//   let localNowDate2  = new Date().getTime();
				// console.log(localNowDate2+(this.localNowDate-spikeList.data.nowTime))
				// localNowDate2 = localNowDate2+(this.localNowDate-spikeList.data.nowTime);
				// let localNowDate2Str= utils.formatDate.format(new Date(localNowDate2), 'hh:mm:ss');
				// 				console.log(tempSpikeTime,11111)
				// 				this.nowTime=localNowDate2;
				// 				console.log(this.nowTime[0],22222);
				// 				let countDown = tempSpikeTime.split(":");
				// 				
				// 				if (countDown[0] == 23) {
				// 					countDown[0] = 24
				// 				}
				// 				let tempH = countDown[0]  - this.nowTime[0] - 1;  //时
				// 				if(tempH<=0){
				// 					tempH=0;
				// 				}
				// 				console.log(countDown[0],3333)
				// 				let tempM = 59 - this.nowTime[1]; //分
				// 				let tempS = 59 - this.nowTime[2]; //秒
				// 
				let _this = this;
				// 			
				// 				//new 
				// 				 

				clearInterval(t);
				t = setInterval(function() {
					let nowtime2 = new Date().getTime();
					let test2 = _this.endtime - nowtime2 - _this.localNowDate;

					if (spikeList.data.data.endTime) {
						let temp = 0;
						test2 = test2 / 1000;

						_this.coutDownDie.a = Math.floor(test2 / 3600) < 10 ? "0" + Math.floor(test2 / 3600) : Math.floor(test2 / 3600);
						temp = test2 % 3600;
						_this.coutDownDie.b = Math.floor(temp / 60) < 10 ? "0" + Math.floor(temp / 60) : Math.floor(temp / 60);
						temp = temp % 60;
						_this.coutDownDie.c = Math.floor(temp) < 10 ? "0" + Math.floor(temp) : Math.floor(temp);
					} else {
						_this.coutDownDie.a = '00';
						_this.coutDownDie.b = '00';
						_this.coutDownDie.c = '00'
					}
					// return;
					// if (tempS == 0) {
					// 	tempS = 59;
					// 	if (tempM == 0) {
					// 		tempM = 59
					// 		if (tempH == 0) {
					// 			tempH = 23;
					// 			_this.loadData();
					// 		} else {
					// 			tempH--
					// 		}
					// 	} else {
					// 		tempM--
					// 	}
					// } else {
					// 	tempS--
					// }
					// let tH = tempH > 9 ? tempH : '0' + tempH;
					// let tM = tempM > 9 ? tempM : '0' + tempM;
					// let tS = tempS > 9 ? tempS : '0' + tempS;
					// if (spikeList.data.data.endTime) {
					// 	_this.coutDownDie.a = tH;
					// 	_this.coutDownDie.b = tM;
					// 	_this.coutDownDie.c = tS
					// } else {
					// 	_this.coutDownDie.a = '00';
					// 	_this.coutDownDie.b = '00';
					// 	_this.coutDownDie.c = '00'
					// }

				}, 1000);
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(id, status, fId, linkType) {
				if (status == "panic") {
					uni.navigateTo({
						url: `/pages/product/product?id=${id}&sId=${this.sId}` + `&buyS=start&buyN=panic&fId=${fId}`
					})
				} else if (status == "banner") {
					if (linkType == 1) {
						uni.navigateTo({
							url: `/pages/coupon/center`
						})
					} else {
						uni.navigateTo({
							url: `/pages/product/bannerProduct?id=${id}&title=${fId}`
						})
					}
				} else if (status == "hot") {
					uni.navigateTo({
						url: `/pages/product/bannerProduct?id=${id}&type=hot&title=${fId}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/product/product?id=${id}`
					})
				}

			},
			//分类
			navToClassification(index, type) {
				//                uni.$emit('updateCurrentId',{currentId:index})
				console.log(index, type,123456);
				uni.navigateTo({
					url: `/pages/product/list?sid=` + index + `&type=` + (type ? type : "first")
				})
			},
			//去秒杀商品列表
			goPanic() {
				uni.navigateTo({
					url: `/pages/product/panic`
				})
			},
			/*到搜索*/
			navToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			/*广告位点击*/
			toPage() {
				// uni.navigateTo({
				// 	url: `/pages/coupon/center`
				// })
			}

		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			this.$api.msg('点击了搜索框');
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box {
		// position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 30upx;
		background: #017F01;
		height: 270rpx;
		padding-top: 24rpx;

		.ser-input {
			flex: 1;
			height: 64upx;
			line-height: 64upx;
			font-size: 24upx;
			color: $font-color-base;
			border-radius: 32upx;
			background: rgba(255, 255, 255, .6);
			text-align: left;
			color: #fff;
			padding-left: 50upx;
		}
	}

	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: 170upx;
		}

		.carousel-section {
			padding: 0 30upx;
			position: absolute;
			width: 100%;
			z-index: 10;
			top: 108rpx;

			// background: #017F01;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}
	}

	/* #endif */


	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			// position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 322upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 322upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;

		// background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// font-size: $font-sm + 2upx;
			// color: $font-color-dark;
			font-size: 24upx;
			font-weight: 500;
			color: rgba(101, 101, 101, 1);
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			/*box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);*/
		}
	}

	.ad-1 {
		width: 690upx;
		height: 196upx;
		margin: 0 auto 30rpx;
		/*padding: 10upx 0;*/
		background: #fff;
		border-radius: 16rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 秒杀专区 */
	.seckill-section {
		padding: 4upx 0 24upx 16upx;
		background: #fff;
		width: 690upx;
		margin: auto;
		border-radius: 10upx;
		margin-bottom: 30rpx;

		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.s-img {
				// width: 140upx;
				font-size: 32upx;
				height: 30upx;
			}

			.msAll {
				font-size: 24upx;
				color: #989898;
			}

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				padding-right: 16rpx;
			}

			.tip {
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}

			.timer {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				margin-right: 8rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 50%;
				background: #017F01;
				margin-left: 8rpx;

			}

			.icon-you {
				// font-size: $font-lg;
				font-size: 22upx;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 181upx;
			margin-right: 12upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 181upx;
				height: 181upx;
				border-radius: 6upx;
			}

			.price {
				color: #017F01;
				font-weight: 600;
				font-size: 28rpx;

				span {
					text-decoration: line-through;
					font-size: 22upx;
					color: #989898;
					margin-left: 10upx;
				}
			}

			.country {
				margin: -10upx auto 0;

				img {
					width: 19upx;
					height: 19upx;
					margin-right: 10upx;
					border-radius: 50%;
					vertical-align: middle;
				}

				text {
					color: #656565;
					font-size: 22upx;
				}
			}
		}
	}

	.f-header {
		display: flex;
		align-items: center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;

		image {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}

		.tit-box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.tit {
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}

		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}

		.icon-you {
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}

	/* 团购楼层 */
	.group-section {
		background: #fff;

		.g-swiper {
			height: 650upx;
			padding-bottom: 30upx;
		}

		.g-swiper-item {
			width: 100%;
			padding: 0 30upx;
			display: flex;
		}

		image {
			width: 100%;
			height: 460upx;
			border-radius: 4px;
		}

		.g-item {
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.left {
			flex: 1.2;
			margin-right: 24upx;

			.t-box {
				padding-top: 20upx;
			}
		}

		.right {
			flex: 0.8;
			flex-direction: column-reverse;

			.t-box {
				padding-bottom: 20upx;
			}
		}

		.t-box {
			height: 160upx;
			font-size: $font-base+2upx;
			color: $font-color-dark;
			line-height: 1.6;
		}

		.price {
			color: $uni-color-primary;
		}

		.m-price {
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}

		.pro-box {
			display: flex;
			align-items: center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}

		.progress-box {
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}

	/* 分类推荐楼层 */
	.hot-floor {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;

		.floor-img-box {
			width: 100%;
			height: 320upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255, 255, 255, .06) 30%, #f8f8f8);
			}
		}

		.floor-img {
			width: 100%;
			height: 100%;
		}

		.floor-list {
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-top: -140upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
			position: relative;
			z-index: 1;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;

			image {
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}

			.price {
				color: $uni-color-primary;
			}
		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;

			text:first-child {
				margin-bottom: 4upx;
			}
		}
	}

	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		// padding: 0 30upx;
		// background: #fff;
		width: 690upx;
		margin: auto;
		margin-top: 29upx;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 49.5%;
			padding-bottom: 40upx;
			background: #fff;
			margin-bottom: 10upx;

			&:nth-child(2n+1) {
				margin-right: 1%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 396upx;
			border-radius: 3px;
			overflow: hidden;
			background: #ffffff;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			// font-size: $font-lg;
			// color: $font-color-dark;
			line-height: 50upx;
			font-size: 28upx;
			font-weight: 500;
			color: rgba(40, 40, 40, 1);
			width: 95%;
			margin: auto;
		}

		.price {
			font-size: 32upx;
			// color: $uni-color-primary;
			color: #017F01;
			line-height: 1;
			font-weight: 600;

			span {
				text-decoration: line-through;
				font-size: 24upx;
				color: #989898;
				margin-left: 10upx;
			}
		}

		.country {
			margin: -2upx auto 6upx auto;
			display: flex;
			align-items: center;

			img {
				width: 23upx;
				height: 23upx;
				margin-right: 10upx;
				border-radius: 50%;
			}

			text {
				color: #656565;
				font-size: 24upx;
			}
		}
	}

	.p_class {
		color: #ffffff
	}

	/* 爆款 */
	.store_hot {
		font-size: 32upx;
		text-align: center;
		margin-top: 40rpx;
		margin-left: 40rpx;

		.h_title {
			line-height: 56upx;

			span {
				color: rgba(1, 127, 1, 1);
				font-weight: 700;
				margin: 0 20upx;
			}
		}

		.h_sub {
			font-size: 28upx;
			color: rgba(101, 101, 101, 1);
		}

		.h_img {
			text-align: right;
			margin-bottom: 40upx;
			margin-top: 40upx;

			img {
				width: 572upx;
				height: 309upx;
			}
		}

		.h_img.left {
			text-align: left;
		}
	}

	.clamp {
		width: 95%;
		margin: auto;
	}

	/*品牌热卖，拉美专题*/
	.fix-list {
		display: flex;
		/*justify-content: space-between;*/
		padding-right: 16rpx;

		.el {
			width: 154rpx;
			/*height: 154rpx;*/
			margin-right: 14rpx;

			img {
				width: 154rpx;
				height: 154rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.info {
				margin-top: 10rpx;
				font-size: $font-sm + 2upx;
				background: rgba(117, 70, 22, 0.1);
				border-radius: 18rpx;
				text-align: center;

				&.c0 {
					background: rgba(255, 235, 241, 1);
					color: #C52405;
				}

				&.c1 {
					background: rgba(255, 241, 234, 1);
					color: #E65A1E;
				}

				&.c2 {
					background: rgba(241, 236, 250, 1);
					color: #754DB1;
				}

				&.c3 {
					background: rgba(235, 236, 255, 1);
					color: #6050CC;
				}
			}
		}
	}

	.fix-list.lm {
		.info {
			&.c0 {
				background: rgba(117, 70, 22, 0.1);
				color: #754616;
			}

			&.c1 {
				background: rgba(57, 100, 168, 0.1);
				color: #3964A8;
			}

			&.c2 {
				background: rgba(94, 76, 76, 0.1);
				color: #5E4C4C;
			}

			&.c3 {
				background: rgba(195, 138, 84, 0.1);
				color: #C38A54;
			}
		}
	}

	.guide {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;

		.guideImg1 {
			width: 42upx;
			height: 13upx;
			align-self: flex-end;
			margin: 20upx 130upx 39upx 0;
		}

		.guideImg2 {
			width: 584upx;
			height: 386upx;
			margin-bottom: 200upx;
		}

		.guideImg3 {
			width: 219upx;
			height: 94upx;
		}
	}
</style>
